<template>
    <div class="btnTabOreder4">
    <div class="TMF " v-for="order in orders">
    <div class="TMFS" >
        <div class="T">
          <span>订单编号:{{order.ordernumber}}</span>
          <span>已完成</span>
        </div>
        <div class="M clear">
            <div class="img">
                <img v-bind:src=order.img>
            </div>
            <div class="text">
              <h4 >{{order.title}}</h4>
              <p>&yen{{order.price}}</p>
            </div>
            <div class="num">x 2</div>
        </div>
        <div class="F clear">
            <div class="Fl">
                  <span>共2件</span>
                  <span>合计:</span>
                  <span>&yen59</span>
            </div>
            <div class="Fr">
                  <span  @touchstart="remove(order.id)" >删除</span>
                  <span>去评价</span>
            </div>
         </div>
      </div>
    </div>
    </div>
</template>

<script>
export default {
    data () {
    return {      
        orders:[],
    }
  },
   methods:{
    //删除
    remove:function(id){
      var _this=this;
       if(confirm("确定要取消该订单吗?")){
          $.ajax({
      type:"GET",
      url:"http://172.16.18.39/login/data.php?callback=callback",
      dataType:"jsonp",
      data:{type:"dataDel",id:id},
      success:function(data){
         _this.ajaxData();//调用刷新
      }
      });
     }
    },
    //刷新ajax函数
    ajaxData:function(){
      var _this=this;
      $.ajax({
      type:"GET",
      url:"http://172.16.18.39/login/data.php?callback=callback",
      dataType:"jsonp",
      data:{type:"data"},
      success:function(data){
          _this.orders = data;
      }
    })
    }
  },
   ready:function () {
      this.ajaxData();//调用ajax函数
   }
}
</script>
<style scoped>
   .btnTabOreder4 .TMF{
    width: 100%;
    margin: 3% auto;
    background: white;

  }
  .btnTabOreder4 .TMF .TMFS{
      width: 95%;
      margin: auto;
  }
  /*待付款标题*/
  .btnTabOreder4 .T{
    width: 100%;
    height: .3rem;
    line-height: .3rem;
    font-size: .14rem;
    background: white;
  }
  .btnTabOreder4 .T span:nth-child(2){
    color: #f29004;
    position: absolute;
    right: 3%;
  }
  /*待付款中部*/
  .btnTabOreder4 .M {
  padding-top: 2%;
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
  }
  #warp .btnTab .btnTabOreder4 .img {
    width: 20%;  
    float: left;
  }
  .btnTabOreder4 .img img{
    width: 100%;
     border:1px solid #e6e6e6;
  }
  .btnTabOreder4 .text {
    width: 60%;
    line-height: 0.3rem;
    font-size: .16rem;
    float: left;
    margin-left:3%; 
  }
    .btnTabOreder4 .num{
      float: right;
      font-size: .14rem;
      margin: 0.5rem 0 .1rem 0rem;
  }
  .btnTabOreder4 .text p{
     color: red;
  }
  /*待付款底部*/
   .btnTabOreder4 .F {
        padding: 1%;
   }
   /*左浮*/
    .btnTabOreder4 .F .Fl {
      margin-top: 0.1rem;
      width: 50%;
      float: left;
  }
   /*右浮*/
  .btnTabOreder4 .F .Fr {
        width: 50%;
      float: right;
      text-align: right;
  }
   .btnTabOreder4 .F .Fl span{
     margin-right: 1%;
     color:#999999;
  }
  .btnTabOreder4 .F .Fr span{
      width: .5rem;
    text-align: center;
  }
   .btnTabOreder4 .F .Fr span:nth-child(1){
        display: inline-block;
        padding: 5px 5px;
        color: #999999;
        text-decoration: none;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border:2px solid  #999;
        margin-right: 5%;

  }
  .btnTabOreder4 .F .Fr span:nth-child(2){
        display: inline-block;
        padding: 5px 5px;
        color: #f29004;
        text-decoration: none;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border:2px solid  #f29004;
  }
</style>